<template>
    <div class="swiper-box">
        <Swiper :modules="[Autoplay, Pagination]" :autoplay="{
            delay: 3000,
            pauseOnMouseEnter: true,
        }" :pagination="{ clickable: true }" @slideChange="onChange" class="p-swiper"
            @swiper="(ref) => (swiperRef = ref)">
            <SwiperSlide v-for="(item, index) in props.list" :key="item.banner_image">
                <div class="banner" :class="{ hover: !!item.url }" @click="
                    typeof props.onJumpPath === 'function' &&
                    props.onJumpPath(item.url)
                    ">
                    <div class="banner-video" v-if="item.type == 2">
                        <video loop muted :autoplay="pageStore.isIe" :src="item.banner_image"
                            :ref="(ref) => (videoRef[index] = ref)"></video>

                        <div v-if="item.title === '数字人'" class="szr-btn" @click="
                            typeof props.onJumpPath === 'function' &&
                            props.onJumpPath(
                                'https://szr.yzpt8.com',
                                true,
                                true
                            )
                            ">
                            <img :src="`${_oss_}images/szr-experience-btn.png`" />
                        </div>
                    </div>

                    <img v-if="item.type == 1" :src="item.banner_image +
                        (props.watermark
                            ? '?x-oss-process=image/watermark,image_' +
                            toBase64('water/watermark.png') + '/format,webp'
                            : '')
                        " :title="item.title" alt="北京华锐云空间" />

                    <div class="live-time" v-if="item.livetime">
                        {{ item.livetime }}
                    </div>
                </div>
            </SwiperSlide>
        </Swiper>

        <div class="button-prev" @click="onPrev" v-if="props.list.length > 1">
            <img :src="`${_oss_}images/arrow-left-bold.svg`" />
        </div>

        <div class="button-next" @click="onNext" v-if="props.list.length > 1">
            <img :src="`${_oss_}images/arrow-right-bold.svg`" />
        </div>
        <slot />
    </div>
</template>

<script setup>
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";

const pageStore = usePageStore();
const swiperRef = ref(null);
const props = defineProps({
    list: {
        type: Array,
        default: () => [],
    },

    onJumpPath: {
        type: Function,
        default: () => { },
    },

    height: {
        type: Number,
        default: 0,
    },

    width: {
        type: Number,
        default: 1920,
    },
    watermark: {
        type: Boolean,
        default: true,
    },
});

const videoRef = ref({});

const onPrev = () => {
    swiperRef.value.slidePrev();
};

const onNext = () => {
    swiperRef.value.slideNext();
};

const onChange = (e) => {
    if (props.list[e.activeIndex].type == 2) {
        videoRef.value[e.activeIndex].play();
    }

    for (let index in props.list) {
        if (props.list[index].type == 2 && index != e.activeIndex) {
            videoRef.value[index].pause();
        }
    }
};
</script>
<style lang="scss" scoped>
.button-prev {
    left: 40px;
}

.button-next {
    right: 40px;
}

.button-prev,
.button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 9;
    backdrop-filter: blur(1px);
    cursor: pointer;

    img {
        width: 20px;
    }
}

.swiper-box {
    position: relative;

    .swiper {
        height: auto;
    }

    :deep(.swiper-wrapper) {
        height: auto;
    }
}

.banner {
    position: relative;
    width: 100%;
    height: 100%;

    .live-time {
        position: absolute;
        left: 280px;
        bottom: 108px;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
    }

    &.hover {
        cursor: pointer;
    }

    img {
        width: 100%;
        height: 100%;
        // display: block;
        object-fit: cover;
    }

    &-video {
        position: relative;
        width: 100%;
        height: 100%;

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .szr-btn {
            position: absolute;
            left: 50%;
            bottom: 10%;
            width: 12%;
            transform: translate(-50%, -50%);

            img {
                width: 100%;
                cursor: pointer;
            }
        }
    }
}
</style>
